<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/layui/css/layui.css"
	media="all">
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
</head>
<body>

	<div style="margin-bottom: 5px;">

		<!-- 示例-970 -->
		<ins class="adsbygoogle"
			style="display: inline-block; width: 970px; height: 90px"
			data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

	</div>

	<div class="layui-btn-group demoTable">
		<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
		<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
		<button class="layui-btn" data-type="isAll">验证是否全选</button>
	</div>

	<table class="layui-table"
		page:true, id:'idTest'
		lay-data="{width: 892, height:330, page:true;}"
		lay-filter="demo">
		<thead>
			<tr>
				<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
				<th lay-data="{field:'id',width:80, sort: true, fixed: true}">ID</th>
				<th lay-data="{field:'username', width:80}">用户名</th>
				<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
				<th lay-data="{field:'city', width:80}">城市</th>
				<th lay-data="{field:'sign', width:160}">签名</th>
				<th lay-data="{field:'experience', width:80, sort: true}">积分</th>

				<th lay-data="{field:'classify', width:80}">职业</th>
				<th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
				<th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>
				<th
					lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>

			</tr>
		</thead>
		<tbody>
			<tr>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>
				<td>哈哈哈</td>

			</tr>
		</tbody>

		<tfoot>
			<tr>
				<td>fdsafedas</td>

			</tr>
		</tfoot>





	</table>

	<script type="text/html" id="barDemo"> 
  	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> 
 	 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 
	 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 
 </script>


	<!-- 	<script src="layui/dist/layui.js" charset="utf-8"></script> -->
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui
				.use(
						'table',
						function() {
							var table = layui.table;
							//监听表格复选框选择
							table.on('checkbox(demo)', function(obj) {
								console.log(obj)
							});
							//监听工具条
							table.on('tool(demo)', function(obj) {
								var data = obj.data;
								if (obj.event === 'detail') {
									layer.msg('ID：' + data.id + ' 的查看操作');
									
								} else if (obj.event === 'del') {
									layer.confirm('真的删除行么', function(index) {
										obj.del();
										layer.close(index);
									});
								} else if (obj.event === 'edit') {
									layer.alert('编辑行：<br>'
											+ JSON.stringify(data))
								}
							});

							var $ = layui.$, active = {
								getCheckData : function() { //获取选中数据
									var checkStatus = table
											.checkStatus('idTest'), data = checkStatus.data;
									layer.alert(JSON.stringify(data));
								},
								getCheckLength : function() { //获取选中数目
									var checkStatus = table
											.checkStatus('idTest'), data = checkStatus.data;
									layer.msg('选中了：' + data.length + ' 个');
								},
								isAll : function() { //验证是否全选
									var checkStatus = table
											.checkStatus('idTest');
									layer.msg(checkStatus.isAll ? '全选' : '未全选')
								}
							};

							$('.demoTable .layui-btn').on('click', function() {
								var type = $(this).data('type');
								active[type] ? active[type].call(this) : '';
							});
						});
	</script>





</body>
</html>